<template>
  <div>
    <Navigation />
    <HomePages />
    <div class="xtx-goods-page">
      <div class="container">
        <div class="xtx-bread"></div>
        <div class="goods-info">
          <div class="main">
            <div class="goods-image">
              <div class="large"></div>
              <div class="middle">
                <img :src="details.mainPictures[imgsIndex]" alt="" />
                <div class="layer"></div>
              </div>
              <ul class="small">
                <li @mousemove="mouseoverHaddle(index)" v-for="(item, index) in details.mainPictures" :key="index"
                  :class="{ active: imgsIndex == index }">
                  <img :src="item" alt="" />
                </li>
              </ul>
            </div>

            <ul class="goods-sales">
              <li>
                <p class="smallp">销量人气</p>
                <p class="smallp2">200+</p>
                <p class="smallp3"><i></i>销量人气</p>
              </li>
              <li>
                <p class="smallp">商品评价</p>
                <p class="smallp2">400+</p>
                <p class="smallp3"><i></i>查看评价</p>
              </li>
              <li>
                <p class="smallp">收藏人气</p>
                <p class="smallp2">600+</p>
                <p class="smallp3"><i></i>收藏商品</p>
              </li>
              <li>
                <p class="smallp">品牌信息</p>
                <p class="smallp2">苏宁电器</p>
                <p class="smallp3"><i></i>品牌主页</p>
              </li>
            </ul>
          </div>
          <div class="spec">
              <p class="g-name" data-v-af785f8a="">{{ details.name }}</p>
              <p class="g-desc" data-v-af785f8a="">{{ details.desc }}</p>
              <p class="g-price" data-v-af785f8a=""><span data-v-af785f8a="">{{ details.price }}</span><span
                  data-v-af785f8a="">{{ details.oldPrice }}</span></p>
              <div class="g-service" data-v-af785f8a="">
                <dl data-v-af785f8a="">
                  <dt data-v-af785f8a="">促销</dt>
                  <dd data-v-af785f8a="">12月好物放送，App领券购买直降120元</dd>
                </dl>
                <dl data-v-af785f8a="">
                  <dt data-v-af785f8a="">配送</dt>
                  <dd data-v-af785f8a=""><b data-v-af785f8a=""
                      style="vertical-align: middle; padding-right: 5px; font-weight: normal;">至</b>
                    <div class="xtx-city" data-v-29c2cd1e="" data-v-af785f8a="">
                      <div class="select" data-v-29c2cd1e=""><span class="value" data-v-29c2cd1e="">北京市 市辖区 东城区</span><i
                          class="iconfont icon-angle-down" data-v-29c2cd1e=""></i></div><!---->
                    </div>
                  </dd>
                </dl>
                <dl data-v-af785f8a="">
                  <dt data-v-af785f8a="">服务</dt>
                  <dd data-v-af785f8a=""><span data-v-af785f8a="">无忧退货</span><span data-v-af785f8a="">快速退款</span><span
                      data-v-af785f8a="">免费包邮</span><a href="javascript:;" data-v-af785f8a="">了解详情</a></dd>
                </dl>
              </div>
              <div class="goods-sku" data-v-0fe429cd="" data-v-720f8111="">
                <dl data-v-0fe429cd="" v-for="item,idx in usespecs" :key="idx">
                  <dt data-v-0fe429cd="">{{ item.name }}</dt>
                  <dd data-v-0fe429cd=""  v-for="items,index in item.values" :key="index">
                    <!-- <img class="ing" :class="{'acc':tabindex==index}" v-for="items,index in item.values" :key="index"  v-if="items.picture"  :src="items.picture" alt="" @click="spescimg(index)">
                    <span :class="{'acc':tabspan==index}"  v-for="items,index in item.values" :key="index"  v-if="!items.picture" class="" data-v-0fe429cd=""  @click="spescspan(index)">{{ items.name }}</span> -->
                    <img class="ing" :class="{'acc':tab[idx]==index}"    v-if="items.picture"  :src="items.picture" alt="" @click="spescindex(idx,index)">
                    <span   :class="{'acc':tab[idx]==index}"     v-if="!items.picture" class=""   @click="spescindex(idx,index)">{{ items.name }}</span>
                    </dd>
                </dl>
              </div>
              <div class="xtx-numbox" data-v-6d700d5a="" data-v-720f8111="">
                <div class="label" data-v-6d700d5a="">数量</div>
                <div class="numbox" data-v-6d700d5a="">
                  <a href="javascript:;" data-v-6d700d5a="" class="aaa"  @click="jian()">-</a>
                  <input type="text" v-model="count"  readonly=""  data-v-6d700d5a="">
                    <a href="javascript:;" data-v-6d700d5a="" class="aaa" @click="jia()">+</a></div>
              </div>
              <button class="xtx-button ellipsis middle primary" data-v-1e3a5560="" data-v-720f8111=""
                style="margin-top: 20px;" @click=add()>加入购物车</button>
            </div>
          </div>
      </div>
    </div>
    <goodslive></goodslive>
    <Footer />
  </div>
</template>
<script>
import Navigation from "@/components/Navigation.vue";
import HomePages from "@/components/HomePages.vue";
import Footer from "@/components/app.footer.vue";
import goodslive from '@/components/goods-relevant.vue'
import axios from "axios";
export default {
  data() {
    return {
      details: [],
      imgsIndex: 0,
      count:1,      
      id: '',
      chima:[],
      yanse:[],
      usespecs:[],
      tabindex:-1,
      tabspan:-1,
      tab:{},
      spascs:[],
      skuId:''
    };
  },
  components: {
    Navigation: Navigation,
    HomePages: HomePages,
    Footer: Footer,
    goodslive
  },
  mounted() {
   
    // this.goods()
    axios
      .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/goods?id=' + this.$route.query.id)
      .then((res) => {
        // console.log(res);
        if (res.data.msg == '操作成功') {
          this.details = res.data.result;
          // this.chima=res.data.result.specs[0]
          // this.yanse=res.data.result.specs[1]
          this.usespecs=res.data.result.specs
          this.spascs=res.data.result
          console.log( this.spascs);
          // console.log(this.details);
          // console.log(res.data.result.specs);
          this.usespecs.forEach(i=>{
            i.values.forEach(item=>{
              item.checked=false
            })
          })
        }
      }
      )

  },
  methods: {
    add(){
      var token = this.$store.state.login.token
      console.log(token);
      axios({
        method: "post",
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        data: { skuId: this.skuId, count: this.count }, // 请求参数
        headers: { Authorization: "Bearer " + token },
      }).then(res=>{
            console.log(res);
      })
      console.log(this.skuId);
    },
    jian(){
      if(this.count!=1){
        this.count--
      }
    },
    jia(){
      this.count++
    },
    mouseoverHaddle(index) {
      this.imgsIndex = index;
      //  console.log(index);
    },
    spescindex(idx,index){
      // this.usespecs[idx].values[index].checked=!this.usespecs[idx].values[index].checked;
      // this.usespecs = this.usespecs.slice(0)
     if(this.tab[idx]==index){
      this.$delete(this.tab,idx)
     }else{
      this.$set(this.tab,idx,index)
     }
    //  console.log(this.tab)
     var keys= Object.keys(this.tab)
     var valuenames=''
     for(var i=0;i<keys.length;i++){
      valuenames+=this.usespecs[keys[i]].values[this.tab[keys[i]]].name
      // console.log(this.usespecs[keys[i]].values[this.tab[keys[i]]].name);
      // console.log(keys[i]);
      // console.log(valuenames);
      // var  names={}
      this.spascs.skus.forEach(i=>{
        // console.log(i);
        var bool=true
        i.specs.forEach(item=>{
          // names.push(item.valueName)
          // console.log(item.valueName);
          if(valuenames.indexOf(item.valueName) == -1){
              bool=false
          }
          if (bool) {
            console.log(i);
            this.skuId = i.id;
          } 
        })
       
      })
      
     }

    },
    // spescspan(i){
    //   this.tabspan=i
    // },
  },
};
</script>
<style scoped>
.acc{
  border: 1px solid #01c05a !important;
}
.spec[data-v-720f8111] {
    flex: 1;
    padding: 30px 30px 30px 0;
}
.g-name[data-v-af785f8a] {
    font-size: 22px;
}
.g-desc[data-v-af785f8a] {
    color: #999;
    margin-top: 10px;
}
.g-price[data-v-af785f8a] {
    margin-top: 10px;
}
.g-price span[data-v-af785f8a]:first-child {
    color: #cf4444;
    margin-right: 10px;
    font-size: 22px;
}
.g-price span[data-v-af785f8a]:last-child {
    color: #999;
    text-decoration: line-through;
    font-size: 16px;
}
.g-service[data-v-af785f8a] {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;
}
.g-service dl[data-v-af785f8a] {
    padding-bottom: 20px;
    display: flex;
    align-items: center;
}
.g-service dl dt[data-v-af785f8a] {
    width: 50px;
    color: #999;
}
.g-service dl dd[data-v-af785f8a] {
    color: #666;
}
.xtx-city[data-v-af785f8a] {
    vertical-align: middle;
}
.xtx-city[data-v-29c2cd1e] {
    display: inline-block;
    position: relative;
    z-index: 400;
}
.xtx-city .select .value[data-v-29c2cd1e] {
    color: #666;
    font-size: 12px;
}
.goods-sku[data-v-0fe429cd] {
    padding-left: 10px;
    padding-top: 20px;
}
 .ing {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 5px;
    border: 1px solid #e4e4e4;
    margin-right: 10px;
    cursor: pointer;
}
.goods-sku dl[data-v-0fe429cd] {
    display: flex;
    padding-bottom: 10px;
    align-items: center;
}

.goods-sku dl dt[data-v-0fe429cd] {
    width: 50px;
    color: #999;
}
.goods-sku dl dd[data-v-0fe429cd] {
    flex: 1;
    color: #666;
    line-height: 40px;
}
.goods-sku dl dd>span[data-v-0fe429cd] {
    display: inline-block;
    height: 30px;
    line-height: 28px;
    padding: 0 20px;
    border: 1px solid #e4e4e4;
    margin-right: 10px;
    cursor: pointer;
}
.goods-sku dl dd[data-v-0fe429cd] {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    /* border: 1px solid #e4e4e4; */
    margin-right: 10px;
    cursor: pointer;
}
.xtx-numbox[data-v-6d700d5a] {
    display: flex;
    align-items: center;
}
.xtx-numbox .label[data-v-6d700d5a] {
    width: 60px;
    color: #999;
    padding-left: 10px;
}
.xtx-numbox .numbox[data-v-6d700d5a] {
    width: 120px;
    height: 30px;
    border: 1px solid #e4e4e4;
    display: flex;
}
.xtx-numbox .numbox>a[data-v-6d700d5a]:first-of-type {
    border-right: 1px solid #e4e4e4;
}
.xtx-numbox .numbox[data-v-6d700d5a] .aaa{
    width: 29px !important;
    line-height: 28px;
    text-align: center;
    background: #f8f8f8;
    font-size: 16px;
    color: #666;
}
.xtx-numbox .numbox>input[data-v-6d700d5a] {
    width: 60px;
    padding: 0 5px;
    text-align: center;
    color: #666;
}
input[type=text] {
    padding: 0;
    outline: none;
    border: none;
    /* -webkit-appearance: none; */
}
.primary[data-v-1e3a5560] {
    border-color: #27ba9b !important;
    background: #27ba9b !important;
    color: #fff;
}
.middle[data-v-1e3a5560] {
    width: 180px;
    height: 50px;
    font-size: 16px;
}
.xtx-button[data-v-1e3a5560] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: #fff;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}


.active {
  border: 2px solid #27ba9b !important;
}

.xtx-goods-page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}

.goods-info {
  width: 100%;
  height: 600px;
  background: #fff;
  display: flex;
}

.xtx-bread {
  display: flex;
  padding: 25px 10px;
  height: 72px;
}

.main {
  width: 580px;
  height: 600px;
  padding: 30px 50px;
}

.spec {
  flex: 1;
  padding: 30px 30px 30px 0;
  /* background: aqua; */
}

.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
  z-index: 500;
}

.middle {
  width: 400px;
  height: 400px;
  background: #f5f5f5;
  position: relative;
  cursor: move;
}

.middle img {
  width: 400px;
  height: 400px;
  vertical-align: middle;
}

.large {
  /* 放大镜大图 */
  position: absolute;
  top: 0;
  left: 412px;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
  background-repeat: no-repeat;
  background-size: 800px 800px;
  background-color: #f8f8f8;
  display: none;
}

.layer {
  /* 放大镜 */
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  left: 0;
  top: 0;
  position: absolute;
  display: none;
}

.goods-image .small {
  width: 80px;
  height: 400px;
}

.small li {
  width: 68px;
  height: 68px;
  margin-left: 12px;
  margin-bottom: 15px;
  cursor: pointer;
  box-sizing: border-box;
}

.small img {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}

.goods-sales {
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;
}

.goods-sales li {
  flex: 1;
  position: relative;
}

.smallp {
  color: #999;
}

.smallp1 {
  color: #cf4444;
  margin-top: 10px;
}

.smallp2 {
  color: #666;
  margin-top: 10px;
}</style>